<html>
<head>
<link rel='stylesheet' type='text/css' href='/tree/ui/style/style.css' />
<script src='/tree/tree.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js'
				data-dojo-config='isDebug: true,parseOnLoad: true'>

</script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css"
        />

<style type='text/css'>
#navigation
{
    position: absolute;
    opacity: 0;
    background-image: url(/tree/ui/backgrounds/bg1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}
.centerPanel
{
    margin-left: 25%;
    margin-right: 25%;
    display: inline;
}

#left
{
    float: left;
    opacity: 0;
    height: 100%;
    width: 5%;
    z-index: 1;
}
.leftTable
{
    width: auto;
    height: auto;
}

.bottomTable
{
    width: auto;
    height: auto;
}

.leftcell
{
    width: 100%;
    height: 100%;
}
.app
{
    border-radius: 5px;
    width: 50px;
    height: 50px;
    text-align: center;
    background: rgba(80, 80, 80, 0.2);
}

.left-td
{
    width: 60px;
    height: 60px;
}

#dock
{
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 10%;
    position: absolute;
    text-align: center;
    font-size: 20;
    opacity: 0;
    background: rgba(80, 80, 80, 0.2);
}

</style>

<script type='text/javascript'>
dojo.require("dijit.dijit");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.fx");

var rects = null;

window.addEventListener('load', function()
{

    (function()
    {
        var width = window.innerWidth;
        var height = window.innerHeight;
        
        var node = dojo.byId('navigation');
        
        node.style.top = 0;
        node.style.left = width*0.16;
        
        node.style.width = width*0.16;
        node.style.height = height*0.15;

        var timer = null;
        dojo.connect(node, 'onmouseenter', function(evt)
        {
            if(timer)
            {
                clearTimeout(timer);
            }
            dojo.fadeIn({node: node, duration:400}).play();
        });
        
        dojo.connect(node, 'onmouseleave', function(evt)
        {
            timer = setTimeout(function()
            {
                dojo.fadeOut({node: node, duration:800}).play();
            }, 500);
        });
        console.log(node);
    })();
    
    (function()
    {
        var node = dojo.byId('left');
        var timer = null;
        dojo.connect(node, 'onmouseenter', function(evt)
        {
            if(timer)
            {
                clearTimeout(timer);
            }
            dojo.fadeIn({node: node, duration:400}).play();
        });
        
        dojo.connect(node, 'onmouseleave', function(evt)
        {
            timer = setTimeout(function()
            {
                dojo.fadeOut({node: node, duration:800}).play();
            }, 800);
        });
        
        
        var table = dojo.byId('appTable');
        
        var proxy = new tree.io.rpc.JSON_Proxy('/rpc');
        
        var apps = proxy.call_method('get_homepages', []);
        
        for(var key in apps)
        {
            var value = apps[key];
            if(value == '')
            {
                continue;
            }
            var tr = dojo.create('tr', 
            {
                className: 'leftcell',
            }, table);
            
            var td = dojo.create('td', 
            {
                className: 'left-td',
            }, tr);
            
            var app = dojo.create('div', 
            {
                className: 'app',
                innerHTML: key,
            }, td);
            
            (function()
            {
                app.href = value;
            })();
            
            dojo.connect(app, 'onclick', function(evt)
            {
                setTimeout(function()
                {
                    window.location.href = evt.target.href;
                }, 1000);
            });
        }
        
        dojo.query('.app').connect('click', function(evt)
        {
            var duration = 200;
            var list = [];
            for(var i=0; i<4; i++)
            {
                list.push(dojo.fadeOut({node: evt.target, duration:duration}));
                list.push(dojo.fadeIn({node: evt.target, duration:duration}));  
            }
            dojo.fx.chain(list).play();
        });
        
    })();
    
    
    (function()
    {
        var node = dojo.byId('dock');
        var timer = null;
        dojo.connect(node, 'onmouseenter', function(evt)
        {
            if(timer)
            {
                clearTimeout(timer);
            }
            dojo.fadeIn({node: node, duration:400}).play();
        });
        
        dojo.connect(node, 'onmouseleave', function(evt)
        {
            timer = setTimeout(function()
            {
                dojo.fadeOut({node: node, duration:800}).play();
            }, 800);
        });
        
        dojo.query('.app').connect('click', function(evt)
        {
            var duration = 1000;
            dojo.fx.chain([
                dojo.fadeIn({node: evt.target, duration:duration}),
                dojo.fadeOut({node: evt.target, duration:duration}),
                dojo.fadeIn({node: evt.target, duration:duration}),
                dojo.fadeOut({node: evt.target, duration:duration}),
                dojo.fadeIn({node: evt.target, duration:duration}),
                dojo.fadeOut({node: evt.target, duration:duration}),
                dojo.fadeIn({node: evt.target, duration:duration}),
            ]).play();
        });
        
    })();
    
    

});
</script>

{% block head %}

{% endblock %}
</head>
<body class='nihilo'>

<div id='dock'>

    Status Messages

</div>

<div id='left'>
    <table class='leftTable' id='appTable'>
    
    </table>
</div>

<div id='navigation'>
<div class="centerPanel">
    <button dojoType="dijit.form.Button" type="button">
        Back
        <script type="dojo/method" event="onClick" args="evt">
            history.back();
        </script>
    </button>
    
    <button dojoType="dijit.form.Button" type="button">
        Forward
        <script type="dojo/method" event="onClick" args="evt">
            history.forward();
        </script>
    </button>
</div>
</div>

{% block scripts %}

{% endblock %}

{% block content %}

{% endblock %}

</body>
</html>
